﻿
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
    MasterPageFile="~site/_catalogs/masterpage/CustomApp1_1.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <meta name="WebPartPageExpansion" content="full" />
    <script src="../Scripts/AdRotator-1.9.js"></script>
    <script src="../Scripts/Analytics-1.2.js"></script>
    <script src="../Scripts/YouTube.js?v=1.1"></script>

    <link rel="Stylesheet" type="text/css" href="../Content/YouTube.css?v=1.1" />
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div id="adRotator">
    </div>
    <h2>How to insert a YouTube video:</h2>
    <div class="instructionStep" id="step1">
        <h3>Step 01: Copy the url of the YouTube video.</h3>
        <img class="instructionImage" src="../Images/Step1.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step2">
        <h3>Step 02: Edit the page you want to add the YouTube video to.</h3>
        <img class="instructionImage" src="../Images/Step2.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step3">
        <h3>Step 03: Click on add a App Part in the ribbon.</h3>
        <img class="instructionImage" src="../Images/Step3.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step4">
        <h3>Step 04: Insert the YouTube App Part.</h3>
        <img class="instructionImage" src="../Images/Step4.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step5">
        <h3>Step 05: Edit the App Part.</h3>
        <img class="instructionImage" src="../Images/Step5.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step6">
        <h3>Step 06: Choose a Video Format and paste the YouTube Url.</h3>
        <img class="instructionImage" src="../Images/Step6.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step7">
        <h3>Step 07: Save the page.</h3>
        <img class="instructionImage" src="../Images/Step7.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>
    <div class="instructionStep" id="step8">
        <h3>Step 08: Enjoy the result!</h3>
        <img class="instructionImage" src="../Images/Step8.png" />

        <a class="previousStep">Previous step</a><a class="nextStep">Next step</a>
    </div>

    
</asp:Content>
